<template>
  <div class="welcome-container">
    <h1 class="welcome-title">你好  欢迎  Welcome !</h1>
    <h2 class="welcome-subtitle">欢迎使用“基于SSM的言㐱陪诊大数据展示系统”</h2>
    <el-button type="primary" size="large" @click="goToLogin">前往登录</el-button>
  </div>
</template>

<script>
import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();

    const goToLogin = () => {
      router.push('/login');
    };

    return {
      goToLogin
    };
  }
};
</script>

<style scoped>
.welcome-container {
  height: 100vh; /* 使用视口高度，确保容器占满整个屏幕 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; /* 水平居中 */
  text-align: center;
  background-color: #f5f5f5; /* 添加背景颜色，提升视觉效果 */
}

.welcome-title {
  color: #191919;
  font-size: 36px; /* 增大标题字体大小 */
  margin-bottom: 20px; /* 增加底部间距 */
}

.welcome-subtitle {
  color: #191919;
  font-size: 24px; /* 副标题字体大小 */
  margin-bottom: 40px; /* 增加底部间距 */
}

.el-button {
  padding: 12px 24px; /* 调整按钮内边距 */
  font-size: 18px; /* 增大按钮字体大小 */
}
</style>